<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="filterForm.Vendor" placeholder="Vendor" style="margin-bottom:30px;" clearable />
      </el-col>
      <el-col :span="6">
        <el-input v-model="filterForm.InsIdCd" placeholder="Institute" style="margin-bottom:30px;" clearable />
      </el-col>
      <el-col :span="4">
        <el-select v-model="filterForm.Status" placeholder="Status" style="margin-bottom:30px;" collapse-tags multiple>
          <el-option
            label="Available"
            value="available"
          />
          <el-option
            label="Occupied"
            value="occupied"
          />
          <el-option
            label="Expired"
            value="expired"
          />
          <el-option
            label="Disabled"
            value="disabled"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="search">Search</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="filterForm.MerchantName" placeholder="Merchant Name" style="margin-bottom:30px;" clearable />
      </el-col>
      <el-col :span="6">
        <el-input v-model="filterForm.MerchantType" placeholder="Merchant Type" style="margin-bottom:30px;" clearable />
      </el-col>
      <el-col :span="12">
        <el-date-picker
          v-model="filterForm.date_range"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </el-col>
    </el-row>
    <el-table
      :data="filteredData"
      lazy
      :load="fetchHistory"
      row-key="ID"
    >
      <el-table-column label="Vendor" prop="Vendor" />
      <el-table-column label="Address" prop="Address" />
      <el-table-column label="Institute" prop="InsIdCd" />
      <el-table-column label="Merchant Name" prop="MerchantName" />
      <el-table-column label="Merchant Type" prop="MerchantType" />
      <el-table-column label="Apply Time" prop="ApplyTime" />
    </el-table>

  </div>
</template>

<script>
import { getHistory, getSearchList } from '@/api/search'

export default {

  data() {
    return {
      filterForm: {
        Vendor: '',
        InsIdCd: '',
        MerchantName: '',
        MerchantType: '',
        Status: [],
        date_range: [],
        ApplyTime: {
          date1: '',
          date2: ''
        }
      },
      filteredData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
  },
  methods: {
    search() {
      if (this.filterForm.date_range.length === 2) {
        this.filterForm.ApplyTime.date1 = this.filterForm.date_range[0]
        this.filterForm.ApplyTime.date2 = this.filterForm.date_range[1]
      }
      getSearchList(this.filterForm).then(response => {
        const { Data } = response
        this.filteredData = Data.Items
        this.filteredData.forEach(currentValue => {
          currentValue.hasChildren = true
        })
      })
    },
    fetchHistory(row, treeNode, resolve) {
      setTimeout(() => {
        getHistory({ PosUid: row.PosUid }).then(response => {
          const { Data } = response
          resolve(Data.Items)
        })
      }, 500)
    }
  }
}
</script>

